import React, { useState } from 'react';
import './index.less';
import { Button, Input, DatePicker } from 'antd';
import {
  ProForm,
  ProFormDependency,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import { CloseCircleOutlined, SmileOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import axios from 'axios';
dayjs.extend(customParseFormat);

const range = (start, end) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};

// eslint-disable-next-line arrow-body-style
const disabledDate = (current) => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
const disabledDateTime = () => ({
  disabledHours: () => range(0, 24).splice(4, 20),
  disabledMinutes: () => range(30, 60),
  disabledSeconds: () => [55, 56],
});
export default function Newapp() {
  const [name, setName] = useState();
  const [content, setContent] = useState();
  const [introduce, setIntroduce] = useState();
  const changeName = (e) => {
    setName(e.target.value);
  };
  const changeIntroduce = (e) => {
    setIntroduce(e.target.value);
  };
  const changeContent = (e) => {
    setContent(e.target.value);
  };
  const addForm = async () => {
    let obj = {
      roleName: name,
      content: content,
      introduce: introduce,
    };
    let { data } = await axios.post(
      'http://127.0.0.1:7777/users/addrolelist',
      obj,
    );
    if (data.code === 200) {
      alert('添加成功');
    }
  };
  return (
    <>
      <div className="topBut">
        <Button onClick={addForm}>保存</Button>
        <Button>保存且新增</Button>
        <Button>草稿箱</Button>
        <span className="spans"></span>
        <Button>导入</Button>
      </div>
      <div className="rksqbox">
        <div
          style={{
            paddingTop: '1rem',
            fontSize: '1.5rem',
            textAlign: 'center',
          }}
        >
          添加角色
        </div>
        {/* 基本信息 */}
        <div className="tables">
          <table border={1}>
            <tr className="trs">
              <td colspan={24} style={{ textAlign: 'left', padding: '.3rem' }}>
                基本信息
              </td>
            </tr>

            <tr>
              <td colspan={2}>
                <span style={{ color: 'red' }}>*</span> 角色名:
              </td>
              <td colspan={22}>
                <Input onChange={changeName} />
              </td>
            </tr>

            <tr>
              <td colspan={2}>
                <span style={{ color: 'red' }}>*</span> 信息：
              </td>
              <td colspan={22}>
                <Input onChange={changeContent} />
              </td>
            </tr>
            <tr>
              <td colspan={2}>
                <span style={{ color: 'red' }}>*</span> 角色备注:
              </td>
              <td colspan={22}>
                <Input onChange={changeIntroduce} />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </>
  );
}
